import {
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  TouchableOpacity,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { Ionicons } from "@expo/vector-icons";

export default function MemberScreen() {
  // 1. 添加会员等级系统
  const memberLevels = [
    { level: 1, name: "普通会员", benefits: ["生日特权", "专属券"] },
    {
      level: 2,
      name: "黄金会员",
      benefits: ["生日特权", "专属券", "免邮特权"],
    },
    {
      level: 3,
      name: "钻石会员",
      benefits: ["生日特权", "专属券", "免邮特权", "专属客服"],
    },
  ];

  // 2. 添加会员任务系统
  const memberTasks = [
    { id: 1, title: "每日签到", points: 10, completed: false },
    { id: 2, title: "分享商品", points: 20, completed: false },
    { id: 3, title: "评价晒单", points: 30, completed: false },
  ];

  return (
    <SafeAreaView style={styles.safeArea}>
      <ThemedView style={styles.container}>
        {/* 广告图片 */}
        <View style={styles.adContainer}>
          <Image
            source={{
              uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
            }}
            style={styles.adImage}
          />
        </View>

        {/* 手机号显示 */}
        <View style={styles.phoneContainer}>
          <ThemedText style={styles.phoneText}>131****1234</ThemedText>
          <ThemedText style={styles.phoneHint}>中国移动提供认证服务</ThemedText>
        </View>

        {/* 一键登录按钮 */}
        <TouchableOpacity style={styles.loginButton}>
          <ThemedText style={styles.loginButtonText}>
            本机号码一键登录
          </ThemedText>
        </TouchableOpacity>

        {/* 其他登录方式提示 */}
        <ThemedText style={styles.otherLoginHint}>
          短信验证码登录/注册
        </ThemedText>

        {/* 其他登录方式图标 */}
        <View style={styles.otherLoginMethods}>
          <Image
            source={{
              uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
            }}
            style={styles.loginMethodIcon}
          />
          <Image
            source={{
              uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
            }}
            style={styles.loginMethodIcon}
          />
        </View>

        {/* 协议说明 */}
        <View style={styles.agreementContainer}>
          <View style={styles.checkbox} />
          <ThemedText style={styles.agreementText}>
            我已阅读并同意
            <ThemedText style={styles.linkText}>
              《中国移动认证服务条款》
            </ThemedText>
            和<ThemedText style={styles.linkText}>《使用协议》</ThemedText>、
            <ThemedText style={styles.linkText}>《隐私政策》</ThemedText>
          </ThemedText>
        </View>

        {/* 会员权益展示 */}
        <MemberBenefits />
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  adContainer: {
    height: 200,
    backgroundColor: "#f5f5f5",
    borderRadius: 10,
    marginBottom: 30,
    overflow: "hidden",
  },
  adImage: {
    width: "100%",
    height: "100%",
  },
  phoneContainer: {
    alignItems: "center",
    marginBottom: 30,
  },
  phoneText: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 10,
    color: Colors.text.primary,
  },
  phoneHint: {
    fontSize: 12,
    color: Colors.text.tertiary,
  },
  loginButton: {
    backgroundColor: Colors.primary,
    borderRadius: 25,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 20,
  },
  loginButtonText: {
    color: Colors.text.light,
    fontSize: 16,
    fontWeight: "bold",
  },
  otherLoginHint: {
    textAlign: "center",
    color: Colors.text.secondary,
    marginBottom: 30,
  },
  otherLoginMethods: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 40,
    marginBottom: 30,
  },
  loginMethodIcon: {
    width: 40,
    height: 40,
  },
  agreementContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  checkbox: {
    width: 16,
    height: 16,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 2,
    marginRight: 8,
  },
  agreementText: {
    fontSize: 12,
    color: Colors.text.secondary,
    flex: 1,
  },
  linkText: {
    color: Colors.primary,
  },
  benefitsContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 30,
  },
  benefitItem: {
    flexDirection: "column",
    alignItems: "center",
  },
});

// 3. 添加会员权益展示
const MemberBenefits = () => {
  return (
    <View style={styles.benefitsContainer}>
      <View style={styles.benefitItem}>
        <Ionicons name="gift" size={24} color={Colors.primary} />
        <ThemedText>生日特权</ThemedText>
      </View>
      {/* 其他权益项 */}
    </View>
  );
};
